<script setup>
import { ref, onUnmounted } from 'vue';
import axios from 'axios';
import ResultModal from './message.vue'
import router from '../routers/router';

let timer = null
let studentUsername = ref("");
let studentPassword = ref("");
const modal = ref(null);


// function login() {
//     axios.post('http://localhost:8080/student', {
//         studentUsername: studentUsername.value,
//         studentPassword: studentPassword.value

//     }, {
//         withCredentials: true
//     }).then(async function (response) {
//         if (response.data.code === 1) {
//             modal.value.show(response.data);

//             timer = setTimeout(() => (
//                 router.push('/index')
//             ), 1000);
//         }
//         if (response.data.code === 0) {
//             modal.value.show(response.data);
//         }
//     })
// }

const login = () => {
    axios({
        method: 'post',
        url: 'http://localhost:8080/student',
        redirect: 'follow',
        data: {
            studentUsername: studentUsername.value,
            studentPassword: studentPassword.value
        },
        withCredentials: true
    }).then(async function (response) {
        if (response.data.code === 1) {
            modal.value.show(response.data);

            timer = setTimeout(() => (
                router.push('/index')
            ), 1000);
        }
        if (response.data.code === 0) {
            modal.value.show(response.data);
        }
    })
}

    const reg = () => {
        router.push('/register')
    }
    onUnmounted(() => {
        if (timer) {
            clearTimeout(timer);
        }
    });

    const bac = () => {
        router.back()
    }
</script>

<template>
    <div class="f1">
        <div class="box">
            <div class="h">
                <h2>学生登陆</h2>
            </div>
            <button @click="bac" class="back">
                < 返回</button>
                    <div class="login-box">
                        <div class="name in-box">
                            <p>账户名</p>
                            <input v-model="studentUsername" placeholder="请输入账号" class="studentUsername kaung"><br />
                        </div>
                        <div class="password in-box">
                            <p>密码</p>
                            <input type="password" name="password" id="" v-model="studentPassword" placeholder="请输入密码"
                                class="kaung studentPassword"><br />
                        </div>
                        <div class="reg-login">
                            <input type="button" value="登陆" @click="login" class="button">
                            <input type="button" value="注册" @click="reg" class="button">
                        </div>
                    </div>
        </div>
    </div>
    <ResultModal ref="modal" />
</template>

<style scoped>
.f1 {
    display: flex;
    justify-self: center;
    align-items: center;
    height: 97vh;
}

.box {
    display: flex;
    background-color: #d9facf;
    width: 1000px;
    height: 600px;
    flex-direction: column;
    border-radius: 10px;
}

.in-box {
    display: flex;
    flex-direction: column;
    height: 100px;
}

.in-box p {
    margin: 10px 5px;
    color: #969696;
}

.h {
    height: 100px;
    width: 100%;
    background-color: #f7f5ae;
    border-radius: 10px 10px 0 0;
    display: flex;
}

.h h2 {
    display: block;
    margin: auto;
    color: #84ef63;
}

.login-box {
    margin: 0 auto;
    margin-top: 40px;
}

.login-box .kaung {
    height: 40px;
    width: 350px;
    font-size: 15px;
    outline: none;
    background-color: #f8fecb;
    border: none;
    border-radius: 6px;
    padding-left: 5px;
    color: #797979;
}

.button {
    border: none;
    width: 100px;
    height: 30px;
    background-color: #f7fda5;
    border-radius: 6px;

}

.reg-login {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.back {
    background-color: transparent;
    border: none;
    width: 100px;
    padding: 5px;
}
</style>